
<template>
   <div class="app-container">
     <el-card  style="width: 1000px; margin-left: 0px">
       <el-form ref="form" :model="form" label-width="150px">
         <el-form-item style="text-align: center;margin:10px">
           <el-upload
             class="avatar-uploader"
             action="http://localhost:9001/oss/avatar"
             :show-file-list="false"
             :on-success="handleAvatarSuccess">
             <img v-if="form.avatar" :src="form.avatar" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </el-form-item>
         <el-form-item label="昵称">
           <el-input v-model="form.nickname"></el-input>
         </el-form-item>

         <el-form-item label="电话">
           <el-input v-model="form.mobile" readonly="readonly"></el-input>
         </el-form-item>

         <el-form-item label="性别">
           <el-radio-group v-model="form.sex" >
             <el-radio :label="1" disabled="disabled">女</el-radio>
             <el-radio :label="2" disabled="disabled">男</el-radio>
           </el-radio-group>
         </el-form-item>

         <el-form-item label="年龄" >
           <el-input v-model="form.age" readonly="readonly"></el-input>
         </el-form-item>

         <el-form-item label="密码">
           <el-input v-model="form.password" show-password></el-input>
         </el-form-item>

         <el-form-item>
          <template slot-scope="scope">
          <el-button type="primary" @click="upName()">修改信息</el-button>
          <el-button type="primary">退出</el-button>
         </template>
         </el-form-item>
       </el-form>
     </el-card>
   </div>
</template>
<script >
import cookie from "js-cookie";
import ordersApi from '@/api/orders'

export default{
  layout: 'menu',
  data(){
    return{
      form:{
        nickname:'',
        mobile: '',
        sex:'',
        age:'',
        password:''
      },
      loginInfo:{},
      dialogVisible:false,
      saveForm:{
        password:''
      }
    }
  },
  created() {
    this.getSelect()
  },
  methods:{
    handleAvatarSuccess(res){
      console.log(res)
      //res代表文件路径
      this.form.avatar=res.data
    },
    getSelect(){
      var userStr=cookie.get("front_member")
      if (userStr){
        this.loginInfo=JSON.parse(userStr)
        console.log(this.loginInfo)
        this.form=this.loginInfo
      }
    },
    upName(){
      ordersApi.save(this.form).then(res=>{
      this.loginInfo=  res.data
        this.$message.success("修改昵称成功！")
        cookie.set("front_member",JSON.stringify(this.loginInfo))
        //重新加载当前路由所对应的组件，相当于重新渲染页面
        this.$router.go(0)
      })
    }
  }
}
</script>

<style scoped>

</style>
